<!-- Local nav. -->
<kbn-top-nav name="visualize">
  <!-- Transcluded elements. -->
  <div data-transclude-slots>
    <!-- Title. -->
    <div
      data-transclude-slot="topLeftCorner"
      class="kuiLocalTitle"
    >
      Visualize
    </div>
  </div>
</kbn-top-nav>

<div class="kuiViewContent kuiViewContent--constrainedWidth">
  <!-- ControlledTable -->
  <div class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm">
    <!-- ToolBar -->
    <div class="kuiToolBar">
      <div class="kuiToolBarSearch">
        <div class="kuiToolBarSearchBox">
          <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
          <input
            class="kuiToolBarSearchBox__input"
            type="text"
            placeholder="Search..."
            aria-label="Filter"
            ng-model="listingController.filter"
          >
        </div>
      </div>

      <div class="kuiToolBarSection">
        <!-- Bulk delete button -->
        <button
          class="kuiButton kuiButton--danger"
          aria-label="Delete selected objects"
          ng-if="listingController.getSelectedItemsCount() > 0"
          ng-click="listingController.deleteSelectedItems()"
          tooltip="Delete selected visualizations"
          tooltip-append-to-body="true"
        >
          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
        </button>

        <!-- Create visualization button -->
        <a
          class="kuiButton kuiButton--primary"
          href="#/visualize/new"
          aria-label="Create new visualization"
          ng-if="listingController.getSelectedItemsCount() === 0"
          tooltip="Create new visualization"
          tooltip-append-to-body="true"
        >
          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
        </a>
      </div>

      <div class="kuiToolBarSection">
        <!-- Pagination -->
        <tool-bar-pager-text
          start-item="listingController.pager.startItem"
          end-item="listingController.pager.endItem"
          total-items="listingController.pager.totalItems"
        ></tool-bar-pager-text>
        <tool-bar-pager-buttons
          has-previous-page="listingController.pager.hasPreviousPage"
          has-next-page="listingController.pager.hasNextPage"
          on-page-next="listingController.onPageNext"
          on-page-previous="listingController.onPagePrevious"
        ></tool-bar-pager-buttons>
      </div>
    </div>

    <!-- NoItems -->
    <div
      class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
      ng-if="!listingController.items.length && listingController.filter"
    >
      <div class="kuiNoItems">
        No visualizations matched your search.
      </div>
    </div>

    <!-- PromptForItems -->
    <div
      class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
      ng-if="!listingController.isFetchingItems && !listingController.items.length && !listingController.filter"
    >
      <div class="kuiPromptForItems">
        <div class="kuiPromptForItems__message">
          Looks like you don&rsquo;t have any visualizations. Let&rsquo;s create some!
        </div>

        <div class="kuiPromptForItems__actions">
          <a
            class="kuiButton kuiButton--primary kuiButton--iconText"
            href="#/visualize/new"
          >
            <span class="kuiButton__inner">
              <span class="kuiButton__icon kuiIcon fa-plus"></span>
              <span>Create a visualization</span>
            </span>
          </a>
        </div>
      </div>
    </div>

    <!-- Table -->
    <table class="kuiTable" ng-if="listingController.items.length">
      <thead>
        <tr>
          <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
            <input
              type="checkbox"
              class="kuiCheckBox"
              ng-checked="listingController.areAllItemsChecked()"
              ng-click="listingController.toggleAll()"
            >
          </th>

          <th
            class="kuiTableHeaderCell"
            ng-click="listingController.sortOn('title')"
          >
            Name
            <span
              class="kuiIcon"
              ng-show="listingController.getSortProperty().name === 'title'"
              ng-class="listingController.isAscending() ? 'fa-caret-up' : 'fa-caret-down'"
            ></span>
          </th>

          <th
            class="kuiTableHeaderCell"
            ng-click="listingController.sortOn('type')"
          >
            Type
            <span
              class="kuiIcon"
              ng-show="listingController.getSortProperty().name === 'type'"
              ng-class="listingController.isAscending() ? 'fa-caret-up' : 'fa-caret-down'"
            ></span>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr
          ng-repeat="item in listingController.pageOfItems track by item.id"
          class="kuiTableRow"
        >
          <td class="kuiTableRowCell kuiTableRowCell--checkBox">
            <div class="kuiTableRowCell__liner">
              <input
                type="checkbox"
                class="kuiCheckBox"
                ng-click="listingController.toggleItem(item)"
                ng-checked="listingController.isItemChecked(item)"
              >
            </div>
          </td>

          <td class="kuiTableRowCell">
            <div class="kuiTableRowCell__liner">
              <a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
                {{ item.title }}
              </a>
            </div>
          </td>

          <td class="kuiTableRowCell">
            <div class="kuiTableRowCell__liner">
              <span class="kuiStatusText">
                <span class="kuiStatusText__icon kuiIcon {{ item.icon }}"></span>
                {{ item.type.title }}
              </span>
            </div>
          </td>
        </tr>

      </tbody>
    </table>

    <!-- ToolBarFooter -->
    <div class="kuiToolBarFooter">
      <div class="kuiToolBarFooterSection">
        <div class="kuiToolBarText" ng-hide="listingController.getSelectedItemsCount() === 0">
          {{ listingController.getSelectedItemsCount() }} selected
        </div>
      </div>

      <div class="kuiToolBarFooterSection">
        <!-- Pagination -->
        <tool-bar-pager-text
          start-item="listingController.pager.startItem"
          end-item="listingController.pager.endItem"
          total-items="listingController.pager.totalItems"
        ></tool-bar-pager-text>
        <tool-bar-pager-buttons
          has-previous-page="listingController.pager.hasPreviousPage"
          has-next-page="listingController.pager.hasNextPage"
          on-page-next="listingController.onPageNext"
          on-page-previous="listingController.onPagePrevious"
        ></tool-bar-pager-buttons>
      </div>
    </div>
  </div>
</div>
